<template>
  <!--手机联系人组件-->
  <div :class="{ 'search-open-contact': !$store.state.headerStatus }">
    <header id="wx-header">
      <div class="center">
        <div
          @click="$router.back()"
          tag="div"
          class="iconfont icon-return-arrow"
        >
          <span></span>
        </div>
        <span >选择联系人</span>
      </div>
    </header>

    <!--这里的 search 组件的样式也需要修改一下-->
    <!-- <search></search> -->

    <section>
      <van-checkbox-group v-model="result">
        <!--联系人集合-->

        <div>
          <template v-for="(value, key) in contactsList">
            <!--首字母-->
            <div :ref="`key_${key}`" :key="key" class="weui-cells__title">
              {{ key }}
            </div>
            <div class="weui-cells" v-for="(item,index) in value" :key="item.mid" @click="sendCard(key,index)">
              
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <img
                      v-if="item.getClientMid"
                      :src="item.getClientMid.headimg"
                      class="home__mini-avatar___1nSrW"
                    />
                  </div>
                  <div class="weui-cell__bd" v-if="item.getClientMid">
                    {{ item.remark ? item.remark : item.getClientMid.nickname }}
                  </div>
                </div>
            </div>
          </template>
        </div>

      </van-checkbox-group>
    </section>

  </div>
</template>
<script>
import search from "../common/search";

import { Checkbox, CheckboxGroup, Icon,Dialog } from "vant";
import {
  ApiCreateGroup,
  ApiGetFriendList,
  ApiCelGroupUser,
  ApiSendMessage,
} from "@/api/api/message";
import { showToast } from "@/utils/comm";


export default {
  mixins: [window.mixin],
  components: {
    search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Icon.name]: Icon,
  },
  data() {
    return {
      pageName: "通讯录朋友",
      result: [], //选中的列表
      notHandle: [], //不允许操作的列表
      nickName:'',//
    };
  },
  watch: {

  },
  computed: {
    // 动态计算首拼检索
    contactsInitialList() {
      return this.$store.getters.contactsInitialList;
    },
    contactsList() {
      return this.$store.getters.contactsList;
    },
  },
  mounted() {
    this.init(); //初始化通讯录数据
    this.mid = parseInt(this.$route.query.mid || 0);
    this.nickName = this.$route.query.nickName || '';
  },
  methods: {
    //跳转定位
    toPs(i) {
      window.scrollTo(0, this.$refs["key_" + i][0].offsetTop);
    },
    init() {
      //没有通讯录数据 就重新加载
      if (this.contactsList.length > 0) {
        return;
      }
      ApiGetFriendList().then(({ data, msg }) => {
        this.$store.commit("setFriendList", data.friend);
        let number = 0;
        for (let i in data.friend) {
          if (data.friend[i].type == 1) number++;
        }
      });
    },
    sendCard(inx,index){
      //选择的名片
      let item = this.contactsList[inx][index]
      //名片昵称
      let clinetInfo = item.getClientMid
      // let nickname = item.getClientMid.nickname 
      let cardData = {
        id:clinetInfo.id, //用户id
        nickname:clinetInfo.nickname,//用户昵称
        headimg:clinetInfo.headimg,// 用户头像
        type:1,//  1 个人名片  
        desc:'推荐了'+clinetInfo.nickname
      }
      Dialog.confirm({
        title:'系统提示',
        message:`确认将[${clinetInfo.nickname}]的名片发送到[${this.nickName}]吗？`
      }).then(()=>{
            let msg = JSON.stringify(cardData)
              let params = {
                mid: this.mid,
                msg: msg,
                type: 6,//发送名片消息
              };
          ApiSendMessage(params).then(({data,msg})=>{
            //发送消息成功 客户端给视图追加消息
            this.$store.commit("addMessageList", {
              mid: this.mid,
              msgList: data,
            });
            this.$router.back();//返回上一页
          })
      }).catch(()=>{

      })
    },
  },
};
</script>

<style scoped>
.btn-group-box {
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 10px;
  background-color: #fff;
}
.btn-group-box button {
  padding: 5px 10px;
  background-color: #129611;
  color: #fff;
  border: 0px;
  border-radius: 5px;
  min-width: 70px;
}
.btn-group-box .gray {
  background-color: #eee;
  color: #999;
}

.btn-group-box .red {
  background-color: #fd6242;
  color: #fff;
}
.weui-cell {
  padding: 3px 10px;
}

.notHandle .van-icon-success {
  background-color: #b4edcd !important;
  border-color: #b4edcd !important;
}
</style>